@url searchImage searchSearchImage;
@url clearImage searchClearImage;
@url clearTouchedImage searchClearTouchedImage;

@if swmmobile.css pretty {
	@external mgwt-SearchBox, round, input, clear, clear-active, inputAsLabel;
}

//Alter wert
//background-image: literal('-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1f3f4), color-stop(3%, #e0e4e7), color-stop(50%, #c7cfd4), color-stop(51%, #bec7cd), color-stop(97%, #b4bec6), to(#8999a5) )');

.mgwt-SearchBox {
	height: 60px;
	padding-left: 5px;
	padding-right: 5px;
	position: relative;
	background: #d4d9d5;
	/*background-size: 100% 44px;
	background-repeat: repeat;
	background-position: 0px 0px;
	background-image: literal('-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4c4d4e), to(#404142))');*/
}


.mgwt-SearchBox .round {
		background-clip: padding-box;
		background-image: searchImage;
		background-repeat: no-repeat;
		background-position: 10px 50%;
		
		width: 100%;
		height: 40px;
		
		display: block;
		position: relative;
		top: 10px;
		margin: 0px;
		padding: 0px;
}


.mgwt-SearchBox .round {
	border-bottom-left-radius: 16px 16px;
	border-bottom-right-radius: 16px 16px;
	border-top-left-radius: 16px 16px;
	border-top-right-radius: 16px 16px;
	background-color: white;
}





.mgwt-SearchBox .input {
	border: 0;
	font-size: 16px;
	padding: 0;
	position: absolute;
	display:block;
	top: 0px;
	left: 25px;
	right: 60px;
	bottom: 0px;
	
}


.mgwt-SearchBox .inputAsLabel {
	border: 0;
	font-size: 16px;
	padding: 0;
	position: absolute;
	display:block;
	top: 10px;
	left: 25px;
	right: 60px;
	bottom: 0px;
	color: black;
}




.mgwt-SearchBox .input {
	\-webkit-appearance: none;
	\-webkit-user-select: text;
	\-webkit-tap-highlight-color: rgba(0,0,0,0);
}




.mgwt-SearchBox .clear {
	position: absolute;
	top: -3px;
	right: 10px;
	width: 40px;
	height: 40px;
	font-size: 16px;
	padding: 0;
	background-image: clearImage;
	background-repeat: no-repeat;
	background-position: 50% 50%;
}

.mgwt-SearchBox .clear-active {
	background-image: clearTouchedImage;
}